<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 
        插槽
    插槽也是组件传值的一种方式。
    组件的最大特性就是重用，而用好插槽能大大提高组件的可重用能力。
    通俗的来讲:
    ******插槽无非就是在子组件中挖个坑，坑里面放什么东西由父组件决定。（父-子）
    插槽类型有：
    *单个（匿名）插槽    
        <com>
            <div>1111</div>
        </com> 
        将来通过<slot></slot> 来匹配
    *具名插槽
        <com>
            <div slot="aaa">1111</div>
            <div slot="bbb">1111</div>
        </com> 
        将来通过<slot name="aaa"></slot> 来匹配
    *作用域插槽
     -->
    <div id="app">
      <my-com>
        <div slot="aaa">1111</div>
        <!--  <div slot="bbb">2222</div> -->
      </my-com>
    </div>
    <template id="com">
      <div>
        <slot name="aaa"></slot>
        -个组件
        <!--       <slot name="bbb"></slot> -->
      </div>
    </template>
    <script>
      // 插槽   占位符   作用: 给子组件传递内容(html结构)
      // 1. 默认插槽   slot  代替标签里所有的内容
      // 2. 具名插槽    (1)  给html结构添加slot属性    (2)  slot标签 上添加name属性进行匹配
      // 3. 作用域插槽
      const Com = {
        template: "#com",
      };
      new Vue({
        el: "#app",
        components: {
          "my-com": Com,
        },
      });
    </script>
  </body>
</html>
